//  元素获取
var oInput = document.querySelector("input");
var oUl = document.querySelector("ul");
var aClear = document.querySelectorAll("span");
var aLi = document.querySelectorAll("li");
var oBtn = document.querySelector("button");
var ob = document.querySelectorAll("b");

//  创建新的节点
function newNode(text) {
  var span = document.createElement("span");
  span.innerHTML = "&times;";
  var b = document.createElement("b");
  b.innerHTML = text;
  var li = document.createElement("li");
  li.appendChild(b);
  li.appendChild(span);
  li.style.color = "black";
  oUl.appendChild(li);
}

//  添加按钮点击事件 【新增】
oBtn.onclick = function () {
  newNode(oInput.value);
  oInput.value = "";
  aClear = document.querySelectorAll("span");
  aLi = document.querySelectorAll("li");
  ob = document.querySelectorAll("b");
  spanClick(aClear, aLi);
  liClick(ob, aLi);
}

//  小图标点击事件,删除对应子节点 【删除】
function spanClick(aClear, aLi) {
  for (var i = 0; i < aClear.length; i++) {
    aClear[i].index = i;
    aClear[i].onclick = function () {
      aLi[this.index].parentNode.removeChild(aLi[this.index]);
    }
  }
}

spanClick(aClear, aLi);

//  li点击事件 【编辑】
function liClick(ob, aLi) {
  for (var i = 0; i < aLi.length; i++) {
    aLi[i].index = i;
    aLi[i].onclick = function () {
      if (this.style.color == "black") { //通过样式的判断，来设置此次单击事件任务是什么
        this.style.backgroundColor = "#909399";
        this.style.color = "white";
        ob[this.index].style.textDecoration = "line-through"; //"text-decoration:line-through" 
      } else {
        this.style.backgroundColor = "white";
        this.style.color = "black";
        ob[this.index].style.textDecoration = "none";
      }
    }
  }
}

liClick(ob, aLi);